<template>
    <div>
        <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle" style="width:100%"
            :placeholder="placeholder">
            <el-option :value="valueTitle" :label="valueTitle">
                <el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="usergroupTree"
                    :props="usergroupTreeProps" :node-key="usergroupTreeProps.value" :default-expanded-keys="defaultExpandedKey"
                    @node-click="handleNodeClick">
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>
<script>
    import * as usergroupService from '@/api/upms/usergroup'
    export default {
        name: 'ec-usergroup-tree-select',
        props: {
            value: {
                type: String,
                required: false,
                default: () => {
                    return '0'
                }
            },
            pkGroup: {
                type: String,
                required: false,
                default: () => {
                    return '0'
                }
            },
            pkOrg: {
                type: String,
                required: false,
                default: () => {
                    return '0'
                }
            },
            placeholder: {
                type: String,
                default: "请选择用户组"
            }
        },
        watch: {
            pkGroup(pkGroup) {
                this.requestSize = 0
                this.pkGroup = pkGroup
                this.valueTitle = ''
                this.valueId = null
                this.defaultExpandedKey = []
                this.$emit('input', null)
                this.getRemoteData()
            },
            pkOrg(pkOrg) {
                this.requestSize = 0
                this.pkOrg = pkOrg
                this.valueTitle = ''
                this.valueId = null
                this.defaultExpandedKey = []
                this.$emit('input', null)
                this.getRemoteData()
            },
            value() {
                this.valueId = this.value
                if (this.valueId) {
                    this.initHandle()
                } else {
                    console.log("部门选择组件提示：未选择值")
                }
            }
        },
        data() {
            return {
                usergroupTree: [],
                usergroupTreeProps: {
                    parent: 'pid',
                    value: 'pkUsergroup',
                    label: 'usergroupName',
                    children: 'children',
                },
                timer: null,
                requestSize: 0,
                
                valueId: this.value, // 初始值
                valueTitle: '',
                defaultExpandedKey: [],
                clearable: true,
                accordion: true
            }
        },
        beforeDestroy() {
            this.usergroupTree = []
            clearInterval(this.timer)
        },
        mounted() {
            this.setTimer()
        },
        methods: {
            // 初始化值
            initHandle() {
                // console.log(this.groupTree, this.valueId)
                // if (!this.valueId) return;
                if (!this.valueId) {
                    // console.log("参数无效!", this.valueId)
                    this.clearHandle()
                } else {
                    this.$nextTick(() => {
                        const tempValueTitle = this.$refs.selectTree.getNode(this.valueId) // 初始化显示
                        this.valueTitle = tempValueTitle ? tempValueTitle.data[this.usergroupTreeProps.label] : ''
                        this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
                        this.defaultExpandedKey = [this.valueId] // 设置默认展开
                        this.$emit("input",this.valueId)
                    });
                    this.initScroll()
                }
            },
            // 初始化滚动条
            initScroll() {
                this.$nextTick(() => {
                    let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
                    let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
                    scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
                    scrollBar.forEach(ele => ele.style.width = 0)
                })
            },

            // 切换选项
            handleNodeClick(node) {
                this.valueTitle = node[this.usergroupTreeProps.label]
                this.valueId = node[this.usergroupTreeProps.value]
                this.$emit('input', this.valueId)
                this.defaultExpandedKey = []
            },
            // 清除选中
            clearHandle() {
                this.valueTitle = ''
                this.valueId = null
                this.defaultExpandedKey = []
                this.clearSelected()
                this.$emit('input', null)
            },
            // 清除默认
            resetFields() {
                this.valueTitle = ''
                this.valueId = null
                this.defaultExpandedKey = []
                this.usergroupTree = []
                this.clearSelected()
                this.$emit('input', null)
            },
            /* 清空选中样式 */
            clearSelected() {
                let allNode = document.querySelectorAll('#tree-option .el-tree-node')
                allNode.forEach((element) => element.classList.remove('is-current'))
            },
            setTimer() {
                let that = this
                this.requestSize = 0
                this.timer = setInterval(() => {
                    if (that.$isNotEmpty(that.pkGroup) && that.$isNotEmpty(that
                            .pkOrg) && this.requestSize < 5) {
                        that.getRemoteData()
                    }
                }, 500)
            },
            // 查询字典项
            getRemoteData() {
                //console.log("请求用户组树节点")
                this.requestSize++
                this.usergroupTree = []
                // 构建查询条件
                var params = {
                    pkGroup: this.pkGroup,
                    pkOrg: this.pkOrg
                }
                usergroupService.getusergrouptree(params).then(data => {
                    this.requestSize = 100
                    this.usergroupTree = data;
                    this.initHandle()
                    // console.log('5 - 2:'+this.requestSize)
                    clearInterval(this.timer)
                });
            }
        }
    }
</script>
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li>>>.el-tree .el-tree-node__content {
        height: auto;
        padding: 0 20px;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    .el-tree>>>.is-current .el-tree-node__label {
        color: #409EFF;
        font-weight: 700;
    }

    .el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }
</style>